<template>
  <el-row>
    <el-col :span="24">
      <div class="un-handle-layout">
        <el-row>
          <h2 class="row__title" style="margin-left: 40px; justify-content: flex-start;margin-top: 30px">工作台</h2>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-avatar v-if="userInfo.avatar" :src='"https://seedling-classmate.oss-cn-beijing.aliyuncs.com/"+userInfo.avatar'
                style="margin-top: 20px;margin-left: 35px;margin-bottom: 30px;width: 70px;height: 70px"/>
            <el-avatar v-else class="avatar-box" style="margin-top: 20px;margin-left: 35px;margin-bottom: 30px"/>
          </el-col>
          <el-col :span="10">
            <h2 class="row__text__large" style="margin-left:25px; justify-content: flex-start;margin-top: 25px">早上好，stkaaa，今天是星期二，天气晴朗</h2>
            <h3 class="row__text__small" style="margin-left:25px; justify-content: flex-start;margin-top: 15px">后台管理员 | 新苗同学迎新平台</h3>
          </el-col>
          <el-col :span="5">
          </el-col>
          <el-col :span="7">
            <el-row>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">学生认证进度</h3>
                <h2 class="row__text__plus" style="margin-left:18px; justify-content: flex-start;margin-top: 5px">85%</h2>
              </div>
              <div class="vertical-line" style="margin-top: 30px"></div>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">当前任务总数</h3>
                <h2 class="row__text__plus" style="margin-left:18px; justify-content: flex-start;margin-top: 5px">120</h2>
              </div>
              <div class="vertical-line" style="margin-top: 30px"></div>
              <div>
                <h3 class="row__text__small" style="justify-content: flex-start;margin-top: 35px">当前广告总数</h3>
                <h2 class="row__text__plus" style="margin-left:24px; justify-content: flex-start;margin-top: 5px">66</h2>
              </div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="margin-top: 20px">
    <el-col :span="17">
      <!--数据显示-->
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日学生认证数量</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">304</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="increase" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__green" style="margin-left: 6px; justify-content: flex-start;">+10.34%</h2>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日学生完成任务次数</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">2453</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="increase" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__green" style="margin-left: 6px; justify-content: flex-start;">+13.46%</h2>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="un-handle-layout">
            <el-row>
              <h2 class="row__text__small" style="margin-left: 30px; justify-content: flex-start;margin-top: 20px">今日收入</h2>
            </el-row>
            <el-row>
              <h2 class="row__text__max" style="margin-left:33px; justify-content: flex-start;margin-top: 10px">1024.32</h2>
            </el-row>
            <el-row style="margin-top: 12px;">
              <img :src="decrease" style="margin-left: 30px;width: 15px;height: 15px;margin-bottom: 20px;margin-top: 1px">
              <h2 class="row__text__small__red" style="margin-left: 6px; justify-content: flex-start;">-8.33%</h2>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!--任务监控-->
      <div class="un-handle-layout" style="margin-top: 20px">
        <div class="title-style">学生任务监控</div>
        <div id="taskMonitor" style="width:100%;height:320px;margin-top: 30px;"></div>
      </div>
    </el-col>
    <el-col :span="7">
      <!--便捷导航-->
      <div class="un-handle-layout-green">
          <div class="title-style-white">便捷导航</div>
          <div>
            <el-row>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">用户管理</h2>
              </el-col>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">学生管理</h2>
              </el-col>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">商城管理</h2>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">权限管理</h2>
              </el-col>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">商城管理</h2>
              </el-col>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">任务管理</h2>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <h2 class="row__text__primary" style="justify-content: center;margin-top: 15px">商家管理</h2>
              </el-col>
              <el-col :span="8">
                <h2 class="row__text__green" style="justify-content: center;margin-top: 15px;margin-bottom: 20px">+ 添加</h2>
              </el-col>
            </el-row>
          </div>
        </div>
      <!--学生认证进度排行-->
      <div class="un-handle-layout" style="margin-top: 20px">
        <div class="title-style">学生认证进度排行</div>
        <div id="collegeRank" style="width:90%;height:300px"></div>
      </div>
    </el-col>
  </el-row>

</template>

<script>
import increase from "@/assets/home/increase.png"
import decrease from "@/assets/home/decrease.png"
import * as echarts from 'echarts'
import {ElMessage} from "element-plus";
export default{
  name: "HomeComponent",
  data() {
    return {
      increase:increase,
      decrease:decrease,
      userInfo:{
      },
      acrossData : [
        { name: '数学科学学院', value: 98 },
        { name: '物理科学与技术学院', value: 96 },
        { name: '化学与化工学院', value: 95 },
        { name: '人工智能学院', value: 95 },
        { name: '人文学院', value: 91 },
        { name: '控制科学与工程学院', value: 90 },
        { name: '机械工程学院', value: 90 },
        { name: '材料科学与工程学院', value: 89 },
        { name: '法学院', value: 89 },
        { name: '物理科学与技术学院', value: 88 },
        { name: '环境科学与工程学院', value: 86 },
        { name: '生命科学学院', value: 85 },
        { name: '电子与信息工程学院', value: 84 },
        { name: '电气工程学院', value: 82 },
        { name: '知识产权学院', value: 79 },
        { name: '纺织科学与工程学院', value: 77 },
        { name: '经济与管理学院', value: 76 },
        { name: '航天航空学院', value: 76 },
        { name: '艺术学院', value: 75},
        { name: '药学院', value: 74 },
        { name: '计算机科学与技术学院', value: 72 },
        { name: '软件学院', value: 72 },
        { name: '马克思主义学院', value: 70 }
      ]
    }

  },
  methods: {
    getUserInfo() {
      this.axios.post('/userLoginController/getUserInfo').then(res => {
        if(res.status === 200) {
          this.userInfo=res.data.data;
          console.log("获取用户信息：",this.userInfo)
        }
        else {
          ElMessage.warning('error')
        }
      })
    },
    initCollegeRank() {
      this.charts = echarts.init(document.getElementById('collegeRank'))
      var option =  {
        grid: {
          right: '15%',
          top: '10%',
          bottom: '0%',
        },
        xAxis: {
          show: false,
          type: 'value',
          max: 120
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#53646f',
              align: 'left', // 文字左对齐
              verticalAlign: 'bottom',
              position: 'insideBottom', // 通过修改position属性来调整文字位置
              padding: [0, 0, 8, 15],
              fontSize: 14,
            },
            data: this.acrossData.map(item => `${item.name} : ${item.value}%`)
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        // 滚动条
        dataZoom: [
          {
            show: true,
            right: '5%',
            top:'10%',
            width: 10,
            height:260,
            showDetail: false,
            brushSelect: false,
            orient: 'vertical',
            backgroundColor: '#e0f495',
            showDataShadow: false,
            startValue: 0,
            endValue: 6,
            borderColor: 'transparent',
            fillerColor: '#7ecf6a',
            zoomLock: true,
            handleSize: '130%',
            handleIcon:
                'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z' // 画一个圆形
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [10],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: '#7ecf6a' },
                  { offset: 1, color: '#7ecf6a' }
                ]),

              }
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: '#e0f495' },
                  { offset: 0.5, color: '#7ecf6a' },
                  { offset: 1, color: '#e0f495' }
                ])
              }
            },
            data: this.acrossData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    },
    initTaskMonitor() {
      this.charts = echarts.init(document.getElementById('taskMonitor'))
      var option = {
       // color: ['#a0c05f', '#fdde84', '#b4dc71', '#90b85d', '#fdd613'],
        color: ['#60cc8a', '#7ecf6a', '#abd85b', '#ccdc50', '#f3e14e'],
        legend: {
          data: ['拍照打卡', '扫描二维码', '摄像头识别', '线上答题', '完成率'],
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '1%',
          top: '25%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
          borderWidth: '0', //边框为0
          textStyle: {
            color: '#fff', //字体颜色
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true, //坐标轴两端不留空
            axisLine: {
              show: true, //隐藏X轴轴线
              lineStyle: {
                color: '#D9D9D9',
              },
            },
            axisLabel: {
              show: true,
              //formatter: '{value}月',
              textStyle: {
                padding: [2, 0, 0, 0],
                color: '#333',
              },
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisPointer: {
              type: 'shadow',
            },
            data: ['2024-8-30', '2024-8-31', '2024-9-1', '2024-9-2', '2024-9-3', '2024-9-4', '2024-9-5'],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：次',
            min: 0,
            max: 30000,
            interval: 3000,
            splitNumber: 10,
            axisLabel: {
              textStyle: {
                color: '#666',
              },
            },
            //name的样式设计
            nameTextStyle: {
              align: 'left',
              padding: [0, 0, 0, -30],
            },
            splitLine: {
              lineStyle: {
                type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
                color: '#E9E9E9',
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: 'value',
            name: '完成率(%)',
            min: 0,
            max: 100,
            splitNumber: 10,
            interval: 10,
            axisLabel: {
              textStyle: {
                color: '#666',
              },
            },
            //name的样式设计
            splitLine: {
              lineStyle: {
                type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
                color: '#E9E9E9',
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '拍照打卡',
            type: 'bar',
            yAxisIndex: 0,
            stack: true, //堆叠柱状图
            barWidth: 30, //柱状图宽度
            // itemStyle: {
            //   barBorderRadius: 0,
            // },
            data: [4352, 7653, 4675, 7498,4675,5684,5456,4860],
          },
          {
            name: '扫描二维码',
            type: 'bar',
            yAxisIndex: 0,
            stack: true, //堆叠柱状图
            barWidth: 30, //柱状图宽度
            // itemStyle: {
            //   barBorderRadius: [8, 8, 0, 0],
            // },
            data: [5553, 4532, 4532, 5434, 4553, 6543, 6646, 6749],
          },
          {
            name: '摄像头识别',
            type: 'bar',
            yAxisIndex: 0,
            stack: true, //堆叠柱状图
            barWidth: 30, //柱状图宽度
            // itemStyle: {
            //   barBorderRadius: [8, 8, 0, 0],
            // },
            data: [5675, 5644, 7545, 6756, 6546,7564,7657,6256],
          },
          {
            name: '线上答题',
            type: 'bar',
            yAxisIndex: 0,
            stack: true, //堆叠柱状图
            barWidth: 30, //柱状图宽度
            data: [6556, 6546, 4356, 6456, 5645, 5645, 6757, 8678],
          },
          {
            name: '完成率',
            type: 'line',
            yAxisIndex: 1,
            data: [79, 88, 74, 94, 75, 88, 94, 92],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    },
  },
  mounted() {
  this.getUserInfo();
  this.initCollegeRank();
  this.initTaskMonitor();
}
}
</script>
<style scoped lang="scss">
.un-handle-layout {
  background: #FFFFFF;
}

.un-handle-layout_pie {
  background: #f8f8f8;
  height: 70px;
  border-radius: 10px; /* 设置圆角为10像素 */
}

.un-handle-layout-green {
  background: #FFFFFF;
}

.row__title{
  color: #53646f;
  font-weight: bold;
  font-size: 20px;
  margin: 0;
}

.row__text__max{
  color: #53646f;
  font-weight: 400;
  font-size: 25px;
  margin: 0;
}

.row__text__plus{
  color: #53646f;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

.row__text__large{
  color: #53646f;
  font-weight: 400;
  font-size: 18px;
  margin: 0;
}

.row__text__primary{
  color: #53646f;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  text-align: center; /* 设置文本居中 */
}

.row__text__green{
  color: #67C23A;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  text-align: center; /* 设置文本居中 */
}
.row__text__small{
  color: #53646f;
  font-weight: 300;
  font-size: 12px;
  margin: 0;
}

.row__text__small__green{
  color: #59b52a;
  font-weight: 350;
  font-size: 13px;
  margin: 0;
}

.row__text__small__red{
  color: #F56C6C;
  font-weight: 350;
  font-size: 13px;
  margin: 0;
}
.vertical-line {
  border-left: 1px solid  #c9c9c9; /* 设置竖线的颜色和粗细 */
  height: 60px; /* 设置竖线的高度 */
  margin: 0 20px; /* 设置竖线与其他内容的间距 */
}

.title-style {
  color: #606266;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 17px;
  border-bottom: 1px solid #ebebeb; /* 设置横线的样式 */
}

.title-style-white {
  color: #606266;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 17px;
  border-bottom: 1px solid #ebebeb; /* 设置横线的样式 */
}

.avatar-box {
  width: 70px;
  height: 70px;
  background: url("@/assets/defaultAvatar.png") no-repeat;
  background-size: 70px 70px;
}

</style>